<template>
  <div>
    <el-autocomplete
      v-model="curValue"
      class="dialog"
      :fetch-suggestions="querySearch"
      v-bind="$attrs"
      @select="selectHandle"
    >
      <i slot="suffix" class="el-icon-search dialog-search-icon" @click="handleIconClick" />
      <template #default="{item}">
        <slot v-bind="{item}">
          <div>{{ item.label }}</div>
        </slot>
      </template>
    </el-autocomplete>
    <el-dialog :visible.sync="visible" :width="width" :title="title" append-to-body :close-on-click-modal="closeOnClickModal">
      <slot name="dialog">
        <c-table-box ref="table" :checkbox="checkbox" :table-config="tableConfig" @selection-change="selectionChange" />
      </slot>
      <div class="dialog-bottom">
        <el-button type="primary" @click="confirmHandle">确认</el-button>
        <el-button type="primary" @click="cancelHandle">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'Dialog',
  props: {
    value: {
      type: [String, Array],
      default: ''
    },
    searchFun: {
      type: Function,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '70vw'
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    setting: {
      type: Array,
      default: () => []
    },
    interfacePath: {
      type: String,
      default: ''
    },
    checkbox: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      curValue: '',
      visible: false
    }
  },
  computed: {
    tableConfig() {
      return {
        interfacePath: this.interfacePath,
        setting: this.setting
      }
    }
  },
  watch: {
    value: {
      handler(n) {
        this.curValue = n
      },
      immediate: true
    },
    curValue(n) {
      this.$emit('input', n)
    }
  },
  methods: {
    querySearch(value, cb) {
      this.searchFun(value, cb)
    },
    handleIconClick() {
      this.visible = true
    },
    confirmHandle() {
      this.$emit('confirm')
    },
    cancelHandle() {
      this.visible = false
      this.$emit('cancel')
    },
    selectHandle(v) {
      this.$emit('select', v)
    },
    selectionChange(v) {
      this.$emit('selection-change', v)
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog{
  width: 100%;
  .dialog-search-icon{
    cursor: pointer;
  }
}
</style>
<style>
.dialog-bottom{
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
  }
</style>
